<template>
    <!-- 展示全部订单的结构 -->
    <el-card>
        <template #header>
            <div class="card-head">
                <span>挂号订单</span>
            </div>
        </template>
        <!-- 提供用户选择的下拉菜单 -->
        <el-form :inline="true">
            <el-form-item label="就诊人">
                <el-select placeholder="请选择就诊人" v-model="patientId" @change="changeUser" style="width: 200px">
                    <el-option label="选择所有患者" value="" />
                    <el-option v-for="item in allUser" :key="item.id" :value="item.id" :label="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select placeholder="请选择订单的状态" v-model="orderStatus" style="width: 200px" @change="changeOrderState">
                    <el-option label="全部订单" value=""></el-option>
                    <el-option v-for="(item, index) in allOrderState" :key="index" :label="item.comment"
                        :value="item.status"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <!-- 展示订单的表格 -->
        <el-table border style="margin: 10px 0px" :data="allOrderArr">
            <el-table-column label="就诊时间" prop="reserveDate"></el-table-column>
            <el-table-column label="医院" prop="hosname"></el-table-column>
            <el-table-column label="科室" prop="depname"></el-table-column>
            <el-table-column label="医生" prop="title"></el-table-column>
            <el-table-column label="服务费" prop="amount"></el-table-column>
            <el-table-column label="就诊人" prop="patientName"></el-table-column>
            <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
            <el-table-column label="操作">
                <template #="{ row }">
                    <el-button type="primary" link @click="goDetail(row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            background layout="total, sizes, ->,prev, pager, next, jumper" :total="total" @size-change="handler"
            @current-change="getOrderInfo" />
    </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import type {
    AllOrderState,
    AllOrderStateResponseData,
    AllUserResponseData,
    AllUser,
    UserOrderInfoResponseData,
    Records,
} from "@/api/user/type";
//引入获取订单的请求的方法
import { reqUserOrderInfo, reqAllUser, reqOrderState } from "@/api/user";
import { useRouter } from "vue-router";

const $router = useRouter();

const currentPage = ref<number>(1);
const pageSize = ref<number>(10);
// 存储订单的总个数
const total = ref<number>(0);
// 存储全部就诊人的信息
const allUser = ref<AllUser>([]);
// 存储全部订单的状态
const allOrderState = ref<AllOrderState>([]);
// 订单数据集
const allOrderArr = ref<Records>([]);

// 病人下拉框的值记录
const patientId = ref<string>('')
// 订单状态下拉框的值记录
const orderStatus = ref<string>('')

// 获取订单
const getOrderInfo = async () => {
    const res: UserOrderInfoResponseData = await reqUserOrderInfo(currentPage.value, pageSize.value, patientId.value, orderStatus.value)
    if (res.code === 200) {
        allOrderArr.value = res.data.records
        total.value = res.data.total;
    }
};
// 获取就诊人与订单状态接口方法
const getStatus = async () => {
    const res_order: AllOrderStateResponseData = await reqOrderState()
    if (res_order.code === 200) {
        allOrderState.value = res_order.data
    }
    const res_user: AllUserResponseData = await reqAllUser()
    if (res_user.code === 200) {
        allUser.value = res_user.data
    }
}

// 就诊人下拉菜单回调
const changeUser = (value: string) => {
    patientId.value = value
    getOrderInfo()
}
// 订单状态下拉菜单回调
const changeOrderState = (value: string) => {
    orderStatus.value = value
    getOrderInfo()
}
// 详情按钮的回调
const goDetail = (row: any) => {
    $router.push({
        path: '/user/order',
        query: {
            orderId: row.id,
        },
    });
};
//分页器更改每页显示数量的回调
const handler = (pageSizes: number) => {
    pageSize.value = pageSizes;
    getOrderInfo();
};
onMounted(() => {
    getOrderInfo()
    getStatus()
});
</script>

<style scoped></style>